<html>

<head>
    <script src="js/jquery-3.2.0.min.js"></script>

    <script type="text/javascript">

        var xmlHttp = null;

        function showHint(str) {
            if (str.length == 0) {
                document.getElementById("txtHint").innerHTML = "";
                return;
            }
            try {// Firefox, Opera 8.0+, Safari, IE7
                xmlHttp = new XMLHttpRequest();
            }
            catch (e) {// Old IE
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                    alert("Your browser does not support XMLHTTP!");
                    return;
                }
            }
            var url = "/ajax/processing?q=" + str;
            url = url + "&sid=" + Math.random();
            xmlHttp.onreadystatechange=function()
            {
                if (xmlHttp.readyState==4 && xmlHttp.status==200)
                {
                    document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
                }
            }
            xmlHttp.open("GET", url, true);
            xmlHttp.send(null);

        }
    </script>

    <script type="text/javascript">
        function mAjax(str) {
            $.ajax({
                url: "/ajax/load",
                data:{mString:str},
                success:function(responseTxt,statusTxt,xhr){
                    if(statusTxt=="success")
                        alert("data: "+responseTxt+"\nnStatus:"+statusTxt);
                }
            });
        }
    </script>

    <script type="text/javascript">
        function mLoad(str) {
            $("#loadz").load("/ajax/load",{mString:str},function(responseTxt,statusTxt,xhr){
                if(statusTxt=="success")
                    alert("data: "+responseTxt+"\nnStatus:"+statusTxt);
                if(statusTxt=="error")
                    alert("Error: "+xhr.status+": "+statusTxt);
            });
        }
    </script>

    <script type="text/javascript">
        function mGet(str){
            $.get("/ajax/load?mString="+str , function (data,status){
                alert("Data: " + data + "\nnStatus: " + status);
            });
        }
    </script>

    <script type="text/javascript">
        function mPost(str){
            $.post("/ajax/load" ,{mString:str}, function (data,status){
                alert("Data: " + data + "\nnStatus: " + status);
            });
        }
    </script>

</head>
<body>
<h2>Hello World!</h2>
<form>
    First Name:
    <input type="text" id="txt1"
           onkeyup="showHint(this.value)" onclick="mAjax(this.value)" >
</form>
<p>Suggestions: <span id="txtHint"></span></p>
<p>Suggestions: <span id="loadz"></span></p>
</body>
</html>
